<script setup lang="ts">
// 知识库引用内容弹窗
import {computed, watch} from 'vue';

interface Props {
  show: boolean;
  knowledge?: string;
}

const props = withDefaults(defineProps<Props>(), {
  show: false,
  knowledge: ''
});

const emit = defineEmits(['update:show', 'saveTips']);

const modalShowValue = computed({
  get() {
    return props.show;
  },
  set(value: boolean) {
    emit('update:show', value);
  }
});

const knowledgeList = computed(() => {
  return props.knowledge.length > 0 ? props.knowledge.split(',') : [];
});

// 取消
function closeModal() {
  modalShowValue.value = false;
}
</script>

<template>
  <NModal
    v-model:show="modalShowValue"
    preset="card"
    title="知识库引用"
    class="w-750px"
    :mask-closable="false"
    @close="closeModal"
  >
    <div v-if="knowledgeList.length > 0">
      <div v-for="(item, index) in knowledgeList" :key="index" class="knowledge-item">
        {{index + 1}}、{{ item }}
      </div>
    </div>
    <div v-else class="h-100px w-full">
      <NEmpty description="暂无知识库引用内容" />
    </div>
  </NModal>
</template>

<style scoped lang="scss">
.knowledge-item {
  font-size: 16px;
  padding: 5px 0;
}
</style>
